<template>
  <section class="page-container">
    <el-divider content-position="left">
      <section class="divider-wrap">
        <span>markdown编辑器</span>
        <el-popover
          placement="bottom-start"
          title=""
          :width="200"
          trigger="hover"
        >
          <p>
            markdown编辑器常用于技术型文本编辑场景。
            <el-link
              href="https://nhn.github.io/tui.editor/latest/tutorial-example01-editor-basic"
              type="primary"
              target="_blank"
            >
              参 Toast UI Editor 文档
            </el-link>
          </p>
          <template #reference>
            <el-icon class="hover">
              <info-filled />
            </el-icon>
          </template>
        </el-popover>
      </section>
    </el-divider>

    <section class="editor-wrap">
      <section ref="editorSection" />
    </section>
  </section>
</template>

<script lang="ts">
import {
  defineComponent, onMounted, onUnmounted, ref,
} from 'vue';

import { InfoFilled } from '@element-plus/icons-vue';
import Editor from '@toast-ui/editor';
import '@toast-ui/editor/dist/toastui-editor.css';
import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';

export default defineComponent({
  name: 'MarkdownIndex',
  components: {
    InfoFilled,
  },
  setup() {
    const editorSection = ref();
    let editor: any;
    onMounted(() => {
      editor = new Editor({
        el: editorSection.value,
        initialEditType: 'markdown',
        previewStyle: 'vertical',
        height: '100%',
      });
    });

    onUnmounted(() => {
      editor.destroy();
    });
    return {
      editorSection,
    };
  },
});
</script>
<style lang="scss" scoped>
:deep(.#{$namespace}-divider--horizontal) {
  margin-top: 16px;
  margin-bottom: 16px;
}

.divider-wrap {
  display: flex;
  align-items: center;

  .hover {
    cursor: pointer;
  }
}

.page-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

  .editor-wrap {
    flex: 1;
  }
}
</style>
